
<template>
    <div id="situateConfig">
        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
        <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
          <el-checkbox v-for="(city,i) in cities" :label="city.name" :key="i">{{city.name}}</el-checkbox>
        </el-checkbox-group>
    </div>
</template>
 
<script>
import Vue from "vue";
 
export default {
    name:"group-detail",
    data(){
        return{
          
            //全选
    checkAll: false,
    cities: [
    {
        code: 1,
        value: 'b'
      },
      {
        code: 2,
        value: 'a'
      },
      {
        code: 3,
        value: 'c'
      },
      {
        code: 4,
        value: 'd'
      },
      {
        code: 5,
        value: 'e'
      },
      {
        code: 5,
        value: 'f'
      }
    ], //数据源
    checkedCities:[], //绑定默认选中
    isIndeterminate:false, //设置 indeterminate 状态，只负责样式控制
        }
    },
    methods: {
     
handleCheckAllChange(val) {
  console.log(this.findKey(this.cities, '5'));
  // console.log(find(this.cities, 'code', 5)) // 

  
},
       // checkbox选中 --- 当绑定值变化时触发的事件
handleCheckedCitiesChange(value) {
  let checkedCount = value.length;   //选中值的长度
  this.checkAll = checkedCount === this.cities.length;  //如果选中值的长度和源数据的长度一样，返回true，就表示你已经选中了全部checkbox，那么就把true赋值给this.checkAll
  this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length; //同全选按钮事件里面的那个样式控制
  // console.log(find(this.cities, 'name', "高二")) // 
},
 findKey(obj, value, compare = (a, b) => a === b) {
  return Object.keys(obj).find(k => compare(obj[k], value))
}
       
       
       
    }    
}
</script>
<style scoped lang="scss">
#situateConfig >>> .el-select {
    display: inline-block;
    position: relative;
    width: 100%;
}
#situateConfig >>> .el-form-item--mini.el-form-item {
    margin-bottom: 3px;
}
#situateConfig >>> .el-form-item--mini .el-form-item__content{
    line-height: 24px;
}
</style>